<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问css</title>
    <style>
        .c1{
            background-color: red;
        }
        #d1{
            width: 200px;
            height: 100px;
            /*background-color: green;*/
            border: 1px solid green;
        }
        #d2{
            width: 200px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script>
        function f1(){
            let d1 = document.getElementById("d1");
            d1.className = "c1";
        }
        function f2(){
            let d2 = document.getElementById("d2");
            // 可以通过访问style属性的方式操作行内式的样式
            // style属性值是一系列的键值对
            // 因此,可以通过DOM对象.style.样式名的方式操作对应样式
            d2.style.width = "300px";
            d2.style.height = "300px";
            // 所有属性名全部使用驼峰命名法,不再使用-
            // 即:所有xxx-yyy的样式其属性名均为xxxYyy
            d2.style.backgroundColor = "blue";
            d2.style.borderRadius = "50%"
        }
        function f3(){
            let image = document.getElementById("image");
            // console.log(image.style.left)
            image.style.left = parseInt(image.style.left) + 50 + "px";
        }
    </script>
</head>
<body>
<div id="d1" onclick="f1()">这是一个div</div>
<hr>
<div id="d2"  onclick="f2()"></div>
<hr>
<img id="image" onmouseover="f3()" style="position: relative;left: 0px" src="../images/heihei.gif">
</body>
</html>